<template>
  <div class="crisis_report">
    <navigate>危机上报</navigate>

    <div class="white_box mar_top10">
      <van-cell-group class="input_outer">
        <van-field
          v-model="val.name"
          label="危机用户姓名："
          placeholder="请输入姓名"
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="val.departmentName"
          label="所在部门/班级"
          placeholder="请输入所在部门/班级"
        />
      </van-cell-group>
      <van-cell-group class="input_outer father_relative">
        <van-field
          readonly
          clickable
          v-model="val.sex.label"
          label="性别："
          placeholder="选择性别"
          @click="visibleSex = true"
        />
        <v-picker
          :columns="sexs"
          valueKey="label"
          @confirm="selectSexOperate"
          :isVisible="visibleSex"
          @cancel="visibleSex = false"
        />
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="val.problem"
          label="疑似出现问题："
          placeholder="请输入问题"
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="val.behavior"
          label="异常行为表现："
          placeholder="请输入异常行为"
        />
      </van-cell-group>
    </div>

    <div class="tips_box">
      <div class="tips_txt">填写上报信息</div>
      <div class="tips_desc">
        注：非常感谢您上报危机情况，后续管理员如有需要可能会联系您进一步情况核实，请留下您的联系方式吧。
      </div>
    </div>

    <div class="white_box">
      <van-cell-group class="input_outer">
        <van-field v-model="val.manager" label="上报给管理员：" disabled />
      </van-cell-group>
      <van-cell-group class="input_outer father_relative">
        <van-field
          readonly
          clickable
          v-model="val.informant.label"
          label="用户身份："
          placeholder="请选择用户身份"
          @click="visibleUserIdentity = true"
        />
        <v-picker
          :columns="userIdentitys"
          valueKey="label"
          @confirm="selecteUserIdentityOperate"
          :isVisible="visibleUserIdentity"
          @cancel="visibleUserIdentity = false"
        />
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="val.phone"
          label="我的联系方式："
          placeholder="我的联系方式："
        />
      </van-cell-group>
    </div>

    <div class="footer_box">
      <div class="submit_btn" @click="toSubmit">提交上报</div>
      <div class="agree_info">
        <checkbox @getCheckboxValue="checkboxChange"></checkbox>
        <div>我同意上报时提交我的实名信息供管理员查看。</div>
      </div>
    </div>
  </div>
</template>

<script>
import selectMixin from "@/mixins/selectMixin";
import { crisisRepor } from "@/api/funcation/crisisReport";
export default {
  data() {
    return {
      checkbox: false,
      val: {
        name: "",
        sex: {},
        informant: {},
        manager: "超级管理员/干预预检员",
      },
    };
  },
  mixins: [selectMixin],
  methods: {
    async toSubmit() {
      if (!this.val.name) {
        this.$toast("请输入危机用户姓名");
        return;
      }
      if (!this.val.departmentName) {
        return this.$toast("请输入所在部门/班级");
      }
      if (!this.val.sex.id) {
        this.$toast("请选择危机用户性别");
        return;
      }
      if (!this.val.problem) {
        return this.$toast("请输入疑似出现问题");
      }
      if (!this.val.behavior) {
        this.$toast("请输入异常行为表现");
        return;
      }
      if (!this.val.behavior) {
        this.$toast("请输入上报给管理员");
        return;
      }
      if (!this.val.informant.value) {
        this.$toast("请选择用户身份");
        return;
      }
      if (!this.val.phone) {
        this.$toast("请输入联系方式");
        return;
      }

      if (!this.checkbox) {
        this.$toast("请勾选同意上报时提交我的实名信息供管理员查看");
        return;
      }
      let par = {
        name: this.val.name,
        sex: this.val.sex.id,
        department_name: this.val.departmentName,
        problem: this.val.problem,
        behavior: this.val.behavior,
        phone: this.val.phone,
        informant: this.val.informant.value,
      };
      let res = await crisisRepor(par);
      if (res.code == 200) {
        this.$toast("上报成功");
        this.$router.push({
          path: "/nav/functionCenter",
        });
      }
    },
    checkboxChange(e) {
      this.checkbox = e;
    },
    selectSexOperate(item) {
      this.val.sex = item;
      this.visibleSex = false;
    },
    selecteUserIdentityOperate(item) {
      this.val.informant = item;
      this.visibleUserIdentity = false;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-field__label {
  min-width: 120px;
}

.input_outer {
  margin: 0;
}

.crisis_report {
  padding-bottom: 50px;
  background-color: #f4f6fa;
  color: #333333;
}

.white_box {
  background: #ffffff;
  border-radius: 6.67px;
  margin: 0 10px 10px 10px;
  gap: 20px;
}

.mar_top10 {
  margin-top: 10px;
}

.form {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #dddddd;
}

.form:last-child {
  border: 0;
}

.form .txt {
  font-size: 14.67px;
  color: #666666;
  min-width: 120px;
  flex-shrink: 0;
}

.form input,
.report_person {
  width: 60%;
  height: 45px;
  font-size: 14.67px;
  font-weight: bold;
  line-height: 45px;
  border: 0;
}

.form .right-arrow {
  width: 7.67px;
  height: 14px;
}

.tips_box {
  margin: 20px 0;
  padding: 0 20px;
  font-size: 14px;
  line-height: 14px;
}

.tips_txt {
  color: #666666;
}

.tips_desc {
  margin-top: 12.67px;
  color: #aaaaaa;
  line-height: 21.33px;
}

.footer_box {
  margin-top: 33.33px;
}

.submit_btn {
  width: 333.33px;
  height: 46.67px;
  text-align: center;
  line-height: 46.67px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 16.67px;
  margin: 0 auto;
}

.agree_info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24.33px;
}

.agree_info div {
  font-size: 14px;
  color: #555555;
  margin-left: 6.67px;
}
</style>
